
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
    </style>
    <title></title>
</head>
<style>
    #canvas{
        border: 1px solid #9be15d;
    }
</style>
<body>
    <canvas id="canvas" width="600" height="800"></canvas>
</body>
<script>
    var canvas = document.getElementById('canvas')
    var content = canvas.getContext('2d')
    var tangram = [
        {p: [{x: 0, y: 0}, {x: 800, y: 0}, {x: 400, y: 400}], color: '#caff67'},
        {p: [{x: 0, y: 0}, {x: 400, y: 400}, {x: 0, y: 800}], color: '#67becf'},
        {p: [{x: 800, y: 0}, {x: 800, y: 400}, {x: 600, y: 600}, {x: 600, y: 200}], color: '#ef3d61'},
        {p: [{x: 600, y: 200}, {x: 600, y: 600}, {x: 400, y: 400}], color: '#f9fa1a'},
        {p: [{x: 400, y: 400}, {x: 600, y: 600}, {x: 400, y: 800}, {x: 200, y: 600}], color: '#a594c0'},
        {p: [{x: 200, y: 600}, {x: 400, y: 800}, {x: 0, y: 800}], color: '#fa8ecc'},
        {p: [{x: 800, y: 400}, {x: 800, y: 800}, {x: 400, y: 400}], color: '#f6ca29'}
    ]
    for (var i = 0; i<tangram.length; i++) {
        draw(tangram[i], content)
    }
    function  draw (point, ctx) {
        ctx.beginPath();
        ctx.moveTo(point.p[0].x, point.p[0].y)
        for (var j = 1;j<point.p.length; j++) {
            ctx.lineTo(point.p[j].x, point.p[j].y)
        }
        ctx.closePath()
        ctx.fillStyle = point.color;
        ctx.fill()
    }
</script>
</html>
